
import { Button } from "@/components/base";
import { Typography } from "@/components/typography";
import { Flex } from "@/components/flex";
import { toCurrency } from "@/utils/funs";
import * as pages from "@/pages";
import { useNavigate } from "react-router-dom";
import * as hooks from "../../hooks";

const { Text } = Typography;

/** 服务剩余次数 */
export function PackageList() {
    return (
        <>
            <Flex justify="space-between" align="center" style={{ marginBottom: '8px' }}>
                <Text size={14} strong style={{ display: 'block' }}>
                    服务剩余次数
                </Text>
                <BuyButton />
            </Flex>
            {Array.from({ length: 3 }).map((pkg, index) => (
                <div key={index} style={{
                    border: '1px solid #f0f0f0',
                    borderRadius: '8px',
                    padding: '12px',
                    marginBottom: '8px'
                }}>
                    <Flex justify="space-between" align="center" style={{ marginBottom: '8px' }}>
                        <Text size={14} strong>Name</Text>
                        <Text size={12} style={{ color: '#e91e63' }}>¥{toCurrency(100)}</Text>
                    </Flex>
                    <Flex justify="space-between" style={{ fontSize: '12px', color: '#666', marginBottom: '8px' }}>
                        <span>{1}/{10}次</span>
                        <span>有效期：2025-01-01 ~ 2025-01-01</span>
                    </Flex>
                    <div style={{
                        height: '4px',
                        backgroundColor: '#f0f0f0',
                        borderRadius: '2px',
                        overflow: 'hidden'
                    }}>
                        <div style={{
                            width: `${(10 / 90) * 100}%`,
                            height: '100%',
                            backgroundColor: '#e91e63'
                        }} />
                    </div>
                </div>
            ))}
        </>
    )
}

/** 购买按钮 */
function BuyButton() {
    const navigate = useNavigate();
    const { id } = hooks.useSearch();
    return (
        <>
            <Button size="small" onClick={() => {
                navigate(`/${pages.orderCreateForm.name}?customerId=${id}`)
            }}>
                购买
            </Button>
        </>
    )
}